<template>
  <div class="artList" ref="artListDiv">
    <!-- 下拉更新组件 -->
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :success-duration="1000"
      :success-text="sucText"
    >
      <!-- 文章列表组件 -->
      <van-list
        :error.sync="isError"
        error-text="加载失败，点击重新加载"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArtItem v-for="art in list" :key="art.art_id" :article="art" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getChaneelArtList } from '@/api/article'
// 导入 文章列表项 组件
import ArtItem from '@/components/article-item/index.vue'
import { setItem, getItem } from '@/utils/storage'
export default {
  name: 'ArticleList',

  props: ['channel'],

  components: { ArtItem },

  data () {
    return {
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      pre_time: Date.now(),
      sucText: '加载成功了',
      isError: false
    }
  },

  mounted () {
    // {channel.id:100,channel.id:200}
    // 当列表组件被渲染成真实dom时，就为当前div容器绑定滚动事件
    this.$refs.artListDiv.onscroll = (e) => {
      // console.log(e.target.scrollTop)
      // 先读取本地保存的高度数据
      let topDataList = getItem('1102scrollTop')
      !topDataList && (topDataList = {})
      // 再设置当前频道的高度数据
      topDataList[this.channel.id] = e.target.scrollTop
      // 最后将新的高度数据对象重新保存到本地
      setItem('1102scrollTop', topDataList)
    }
  },

  methods: {
    async onRefresh () {
      try {
        // 随机模拟报错
        if (Math.random() >= 0.5) {
          throw new Error('模拟随机报错了')
        }
        // 用当前事件戳请求最新的数据
        const { data: resBody } = await getChaneelArtList(
          this.channel.id,
          Date.now(),
          1
        )
        // 将返回的最新文章从头部加入到数组
        // 找出id不一样的元素，生成新数组，最后加入到list头部
        const newList = resBody.data.results

        newList.forEach((e) => {
          const isExsit = this.list.some((x) => x.art_id === e.art_id)
          if (!isExsit) {
            this.list.unshift(e)
          }
        })

        // 关闭下拉 刷新中 状态，会显示成功文案
        this.refreshing = false
        //   修改成功文案
        this.sucText = '加载成功了'
      } catch (error) {
        // 关闭下拉刷新中状态，会显示成功文案
        this.refreshing = false
        // 修改成功文案
        this.sucText = '加载出错了'
        console.log('报错了：', error.message)
      }
    },
    async onLoad () {
      try {
        // 异步更新数据
        // 1.请求频道文章接口
        // 注意：由于axios直接拿到的是响应对象，我们可以解构其中的data属性，设置给resBody变量
        const { data: resBody } = await getChaneelArtList(
          this.channel.id,
          this.pre_time
        )
        this.list.push(...resBody.data.results)
        //   将返回的下一页的时间戳给data
        this.pre_time = resBody.data.pre_timestamp
        console.log(resBody)
        // 手动将加载状态改成false，代表加载完毕
        this.loading = false
      } catch (error) {
        console.log('出错了：', error.message)
        // 显示 加载错误提示
        this.isError = true
        // 关闭加载状态
        this.loading = false
        this.finished = true
      }
    }
  },

  async created () {
    // // 1.请求频道文章接口
    // // 注意：由于axios直接拿到的是响应对象，我们可以解构其中的data属性，设置给resBody变量
    // const { data: resBody } = await getChaneelArtList(
    //   this.channel.id,
    //   new Date()
    // )
    // this.list = resBody.data.results
  },

  // 当组件从keepalive缓存中重新渲染出来，就会执行
  activated () {
    const topDataList = getItem('1102scrollTop')
    this.$refs.artListDiv.scrollTop = topDataList[this.channel.id]
  }
}
</script>

<style lang="less" scoped>
.artList {
  height: 80vh;
  overflow-y: auto;
}
</style>
